<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<title>Custom Behaviour on Resizing</title>
	</head>
	<body>
		<div id="my_box" style='display:none;'>
			<h2 style='text-align:center'> Try to resize this cell </h2>
				<textarea style='width:300px; height:400px;'>
					Textarea will always fit the cell size, due to onViewResize event handler
				</textarea>
			</div>
		</div>
		<script type="text/javascript" charset="utf-8">
			webix.ui({
				rows:[
					{ template:"Top Bar" },
					{ view:"resizer"},
					{ id:"center_view", height:500, template:"html->my_box", on:{
							"onViewResize" : function(){ this.$view.getElementsByTagName("textarea")[0].style.height = (this.$height - 100) + "px"; }
						}
					},
					{ view:"resizer"},
					{ template:"Bottom Bar" }
				]
			});

		</script>
	</body>
</html>